<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      background-color: #ffffff;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="450"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for drawing
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const radius = 160;
    const lineWidth = 2;

    // Set common drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = lineWidth;

    // 1. Draw the main circle
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the outer tick marks (coating)
    const tickCount = 80;
    const tickLength = 8;
    for (let i = 0; i < tickCount; i++) {
      const angle = (2 * Math.PI / tickCount) * i;
      const startX = cx + radius * Math.cos(angle);
      const startY = cy + radius * Math.sin(angle);
      const endX = cx + (radius + tickLength) * Math.cos(angle);
      const endY = cy + (radius + tickLength) * Math.sin(angle);
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(endX, endY);
      ctx.stroke();
    }

    // 3. Draw the dashed diameter AB
    ctx.beginPath();
    ctx.setLineDash([10, 6]);
    ctx.moveTo(cx - radius, cy);
    ctx.lineTo(cx + radius, cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // 4. Draw the points A and B on the circumference
    const pointRadius = 3;
    ctx.beginPath();
    ctx.arc(cx - radius, cy, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(cx + radius, cy, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 5. Draw the center mark (diamond shape)
    const diamondSize = 5;
    ctx.beginPath();
    ctx.moveTo(cx, cy - diamondSize);
    ctx.lineTo(cx + diamondSize, cy);
    ctx.lineTo(cx, cy + diamondSize);
    ctx.lineTo(cx - diamondSize, cy);
    ctx.closePath();
    ctx.fill();

    // 6. Draw the labels
    ctx.font = 'italic 32px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Label 'A'
    ctx.fillText('A', cx - radius - 30, cy);

    // Label 'B'
    ctx.fillText('B', cx + radius + 30, cy);

    // Label 'R'
    ctx.textBaseline = 'bottom';
    ctx.fillText('R', cx - radius / 2, cy - 20);

  </script>
</body>
</html>